<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 工具栏 -->
<div class="mini-toolbar">
    <table>
        <tr>
            <td style="width:100%;">
                <a id="category_add" class="mini-button" iconCls="icon-folder-add">增加</a>
                <a id="category_edit" class="mini-button" iconCls="icon-folder-edit">编辑</a>
                <a id="category_remove" class="mini-button" iconCls="icon-folder-delete">删除</a>
                <span class="separator"></span>
                <a id="ec_btn" class="btn-default btn_see"><i class="fa fa-expand"></i>展开节点</a>
            </td>
        </tr>
    </table>
</div>
<div id="categoryGrid" class="mini-treegrid small-size"
     url="${ctx}/category/all?module=mall" showTreeIcon="true" resultAsTree="false" autoLoad="false"
     treeColumn="catName" idField="catId" parentField="parentId" allowDrop="true"
     multiSelect="true" ondrawcell="onCategoryDrawCell" expandOnLoad="0"
>
    <div property="columns">
        <div type="checkcolumn"></div>
        <div name="catName" field="catName" width="120">栏目名称</div>
        <div field="sort" width="60">排序</div>
        <div field="style" width="80">样式</div>
        <div field="catDir" width="80">目录</div>
        <div field="template" width="80">模板</div>
        <div field="type" width="50">类型</div>
        <div field="nav" width="50">导航</div>
        <div field="module" type="comboboxcolumn" width="60">模型
            <input property="editor" class="mini-combobox" url="${ctx}/dict/code?id=XTMX&_refresh" valueField="val"
                   textField="name"/>
        </div>
        <div field="count" width="60">记录数</div>
        <div field="linkUrl" width="120">URL</div>
        <div field="action" width="80">操作</div>
    </div>
</div>

<!-- 数据添加与修改窗口, 默认隐藏 -->
<div id="categoryWindow" class="mini-window" style="width:420px;"
     showModal="true" allowDrag="true" iconCls="icon-user-add"
>
    <div id="categoryForm" class="form">
        <input class="mini-hidden" name="catId"/>
        <table class="tbp">
            <tr>
                <td style="width: 40px;">所属</td>
                <td colspan="3"><input id="pctree" name="parentId" class="mini-treeselect w150" emptyText="选择所属栏目" expandOnLoad="0" textField="catName" valueField="catId"
                                            parentField="parentId"/>
                    <span style="margin-left:10px;color:blue;cursor: pointer;text-decoration:underline;" onclick="refreshPCateTree()">置空栏目</span>
                </td>
            </tr>
            <tr>
                <td>栏目 </td>
                <td><input name="catName" class="mini-textbox" required="true"
                                                                 emptyText="请输入栏目" onblur = "onDirFocus"/></td>
                <td style="width: 40px;">目录</td><td> <input name="catDir" class="mini-textbox" required="true"/></td>
            </tr>
            <tr>
                <td>样式</td>
                <td colspan="3"> <input name="style" class="mini-textbox" style="width:335px;"/></td>
            </tr>
            <tr>
                <td>排序 </td><td><input name="sort" class="mini-textbox w80" required="true" vtype="int"/>
                    </td>
                <td style="width: 40px;">类型</td><td><input id="type" name="type" class="mini-combobox"
                                                           data="[{id:0, text:'外链'},{id:1, text:'内置'},{id:2, text:'单页'}]"/></td>
            </tr>
            <tr>
                <td>模型 </td><td><input id="module" name="module" required="true" class="mini-combobox" url="${ctx}/dict/code?id=XTMX&_refresh" valueField="val"
                                       textField="name" enabled="false"/>
                </td>
                <td style="width: 40px;">模板</td><td>待定</td>
            </tr>
            <tr>
                <td colspan="4" style="padding:0;">SEO关键词</td>
            </tr>
            <tr><td colspan="4"><input name="seoKeywords" class="mini-textbox" style="width:395px;"/></td></tr>
            <tr>
                <td colspan="4" style="padding:0;">SEO描述</td>
            </tr>
            <tr><td colspan="4"><textarea name="seoDescription" class="mini-textarea" style="width:395px;"></textarea></td></tr>
        </table>
        <div class="footer-btn" style="text-align:right">
            <a id="ok" class="mini-button" iconCls="icon-ok">确定</a>
            <a id="cancel" class="mini-button" iconCls="icon-cancel">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    mini.parse();
    var grid = mini.get("categoryGrid");
    grid.load();
    var check = true;
    var num = true;
    function onCategoryDrawCell(e){
        var sender = e.sender;
        var node = e.node,
                column = e.column,
                field = e.field,
                value = e.value;
        if (field == "sort") {
            e.cellHtml = `<input id="sort" type="text" class="text" style="width:30px;font-size:10px;height:20px;line-height:20px;" value="`+value+`"/>`;
        }
        if (field == "type") {
            if(sender.isLeaf (node)) {
                if (value == 0) e.cellHtml = `<span style="color:blue;">外链</span>`;
                else if (value == 1) e.cellHtml = `内置`;
                else if (value == 2) e.cellHtml = `<span style="color:red;">单页</span>`;
            }else{
                e.cellHtml = ``;
            }
        }
        if(field == "nav"){
            if(node.parentId) {
                e.cellHtml = ``;
            }else{
                if (value == 1) {
                    e.cellHtml = `<div class="switch active" onclick="OnSwitch('` + node.catId + `', 0, this);">
                                                    <div class="circle"></div>
                                                </div>`;
                } else if (value == 0) {
                    e.cellHtml = `<div class="switch " onclick="OnSwitch('` + node.catId + `', 1, this);">
                                                    <div class="circle"></div>
                                                </div>`;
                }
            }
        }
        if(field == "linkUrl"){
            e.cellHtml = `<a href="${ctx}/`+value+`" target="_blank">`+value+`</a>`;
        }
        if(field == "action"){
            e.cellHtml = `<a class="btn-default btn_see"><i class="fa fa-random"></i>生成静态</a>`;
        }
    };

    //删除数据操作
    $("a#category_remove").click(function () {
        var rows = grid.getSelecteds();
        if (rows.length == 0)
            alert("请选着一条记录进行删除");
        else {
            confirm("您是否确定需要删除该条记录", function () {
                var ids = [];
                for (var i = 0, l = rows.length; i < l; i++) {
                    var r = rows[i];
                    ids.push(r.catId);
                }
                $.post("${ctx}/category/delete", {ids: ids}, function (res) {
                    if (res.code == 0) {
                        tips.success("成功删除 " + res.data + " 条记录!");
                        grid.reload();
                        grid.expandAll();
                    } else
                        tips.error(res.message);
                });
            });
        }
    });
    var win = mini.get("categoryWindow");
    var frm = new mini.Form("categoryForm");
    //打开添加窗口
    $("a#category_add").click(function () {
        frm.clear();
        mini.get("type").setValue(1);
        mini.get("module").setValue("mall");
        mini.get("pctree").setUrl("${ctx}/category/list?module=mall");
        win.setIconCls("");
        win.setTitle("增加栏目");
        win.show();
        $("div.footer-btn").attr("data-option", 0);
    });

    //编辑数据
    $("a#category_edit").click(function () {
        frm.clear();

        mini.get("pctree").setUrl("${ctx}/category/list?module=article");
        var rows = grid.getSelecteds();
        if (rows.length == 0)
            alert("请选着一条记录进行编辑");
        else if (rows.length > 1)
            alert("只能选着一条记录进行编辑");
        else {
            $.get("${ctx}/category/find", {id: rows[0].catId}, function (res) {
                if (res.code == 0) {
                    win.setIconCls("");
                    win.setTitle("编辑栏目");
                    frm.setData(res.data);
                    win.show();
                    $("div.footer-btn").attr("data-option", 1);
                } else
                    tips.error(res.message);
            });
        }
    });

    //修改或保存数据
    $("a#ok").click(function () {
        frm.validate();
        if (frm.isValid() == false) return;
        var data = frm.getData();
        var option = $("div.footer-btn").attr("data-option");
        if (option == "0") {
            $.post("${ctx}/category/save", data, function (res) {
                if (res.code == 0) {
                    win.hide();
                    tips.success("栏目添加成功!");
                    grid.reload();
                } else
                    tips.error(res.message);
            });
        } else if (option == "1") {
            $.post("${ctx}/category/update", data, function (res) {
                if (res.code == 0) {
                    win.hide();
                    tips.success("栏目修改成功!");
                    grid.reload();
                } else
                    tips.error(res.message);
            });
        }
    });

    var OnSwitch = function (id, type, e) {
        $.post("${ctx}/category/updateNav", {id: id, nav: type}, function (res) {
            if (res.code == 0) {
                if (type == 0)
                    tips.success("状态修改成功, 不在导航显示!");
                else if (type == 1)
                    tips.success("状态修改成功, 已在导航显示!");
                $(e).hasClass("active")?$(e).removeClass("active"): $(e).addClass("active");
                var row = grid.getSelected();
                grid.updateNode(row, {nav: type});
                grid.accept();
            } else {
                tips.error(res.message);
            }
        });
    }

    $("a#ec_btn").click(function(){
        if(check){
            check = false;
            grid.expandAll();
            $(this).html('<i class="fa fa-compress"></i>收缩节点</a>');
        }else{
            check = true;
            grid.collapseAll();
            $(this).html('<i class="fa fa-expand"></i>展开节点</a>');
        }
    });

    $("#categoryGrid").on("blur", "input#sort", function(){
        var value = $(this).val();
        var row = grid.getSelected();
        if(!/^[0-9]*$/.test(value)){
            alert("序号只能输入数字!");
        }else{
            $.post("${ctx}/category/updateSort", {id:row.catId, sort: value}, function (res) {
                if (res.code == 0) {
                    tips.success("当前排序修改成功!");
                } else {
                    tips.error(res.message);
                }
            });
        }
    });

    var onDirFocus = function(){
        alert(1);
    }

    //关闭窗口
    $("a#cancel").click(function () {
        win.hide();
    });

    //条件搜索
    $("a#search").click(function () {

    });
    var refreshPCateTree = function(){
        mini.get("pctree").setValue("");
    }
</script>